<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4391505" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon font_family">&#xe684;</span>
                <div class="name">解锁</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe685;</span>
                <div class="name">启用</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe686;</span>
                <div class="name">锁定</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe683;</span>
                <div class="name">禁用</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67d;</span>
                <div class="name">用户名1</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67c;</span>
                <div class="name">sams受益权变更</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67e;</span>
                <div class="name">例外管理</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67f;</span>
                <div class="name">上下拖动</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe680;</span>
                <div class="name">注意事项</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe681;</span>
                <div class="name">AB角</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe682;</span>
                <div class="name">切换组织机构</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67b;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe67a;</span>
                <div class="name">主题设置</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66d;</span>
                <div class="name">关闭当前标签页</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe676;</span>
                <div class="name">条件删除</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe669;</span>
                <div class="name">列筛选有记录</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe677;</span>
                <div class="name">高级筛选展开svg</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe679;</span>
                <div class="name">重置</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe675;</span>
                <div class="name">导出表格</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe674;</span>
                <div class="name">高级筛选</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe673;</span>
                <div class="name">列筛选</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe672;</span>
                <div class="name">拖拽上传</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66a;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66b;</span>
                <div class="name">展开全部</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66c;</span>
                <div class="name">打印当前页面</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66e;</span>
                <div class="name">下拉菜单</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe66f;</span>
                <div class="name">关闭左侧标签页:固定在列首</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe670;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe671;</span>
                <div class="name">复制权限</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65a;</span>
                <div class="name">说明2</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65b;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65c;</span>
                <div class="name">密度</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65d;</span>
                <div class="name">关闭所有标签页</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65e;</span>
                <div class="name">列设置</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe65f;</span>
                <div class="name">注册</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe660;</span>
                <div class="name">说明1</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe661;</span>
                <div class="name">关闭右侧标签页:固定在列尾</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe662;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe663;</span>
                <div class="name">折叠全部</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe664;</span>
                <div class="name">下拉更多</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe665;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe666;</span>
                <div class="name">用户角色</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe667;</span>
                <div class="name">移动列</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe668;</span>
                <div class="name">关闭其它标签页</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe657;</span>
                <div class="name">查询</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe658;</span>
                <div class="name">变更部门</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe659;</span>
                <div class="name">刷新列表</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe656;</span>
                <div class="name">关闭按钮</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe644;</span>
                <div class="name">资金管理</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe641;</span>
                <div class="name">资产资金配置管理</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe642;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe643;</span>
                <div class="name">导航折叠</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe645;</span>
                <div class="name">注销</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe646;</span>
                <div class="name">新增</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe647;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe648;</span>
                <div class="name">系统管理</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe649;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64a;</span>
                <div class="name">流程管理</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64b;</span>
                <div class="name">用户名</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64c;</span>
                <div class="name">资产管理</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64d;</span>
                <div class="name">账户管理</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64e;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe64f;</span>
                <div class="name">项目管理</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe650;</span>
                <div class="name">合同模版管理</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe651;</span>
                <div class="name">流程管理平台（新）</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe652;</span>
                <div class="name">产品管理</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe653;</span>
                <div class="name">合规与风险管理</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe654;</span>
                <div class="name">综合管理</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe655;</span>
                <div class="name">客户管理</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe636;</span>
                <div class="name">修改密码</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe633;</span>
                <div class="name">系统平台</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe634;</span>
                <div class="name">最新功能使用说明</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe635;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe637;</span>
                <div class="name">通用管理</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe638;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe639;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe63b;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe63c;</span>
                <div class="name">资金系统</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe63d;</span>
                <div class="name">说明</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe63e;</span>
                <div class="name">导航展开</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe63f;</span>
                <div class="name">财务抛账管理</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe632;</span>
                <div class="name">营销管理</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon font_family">&#xe640;</span>
                <div class="name">报表</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'font_family';
  src: url('iconfont.woff2?t=1721728640027') format('woff2'),
       url('iconfont.woff?t=1721728640027') format('woff'),
       url('iconfont.ttf?t=1721728640027') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.font_family {
  font-family: "font_family" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="font_family"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon font_family icon-jiesuo"></span>
            <div class="name">
              解锁
            </div>
            <div class="code-name">.icon-jiesuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-qiyong"></span>
            <div class="name">
              启用
            </div>
            <div class="code-name">.icon-qiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-suoding"></span>
            <div class="name">
              锁定
            </div>
            <div class="code-name">.icon-suoding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-jinyong"></span>
            <div class="name">
              禁用
            </div>
            <div class="code-name">.icon-jinyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-yonghuming1"></span>
            <div class="name">
              用户名1
            </div>
            <div class="code-name">.icon-yonghuming1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-samsshouyiquanbiangeng"></span>
            <div class="name">
              sams受益权变更
            </div>
            <div class="code-name">.icon-samsshouyiquanbiangeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-liwaiguanli"></span>
            <div class="name">
              例外管理
            </div>
            <div class="code-name">.icon-liwaiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shangxiatuodong"></span>
            <div class="name">
              上下拖动
            </div>
            <div class="code-name">.icon-shangxiatuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhuyishixiang"></span>
            <div class="name">
              注意事项
            </div>
            <div class="code-name">.icon-zhuyishixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-ABjiao"></span>
            <div class="name">
              AB角
            </div>
            <div class="code-name">.icon-ABjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-qiehuanzuzhijigou"></span>
            <div class="name">
              切换组织机构
            </div>
            <div class="code-name">.icon-qiehuanzuzhijigou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhutishezhi1"></span>
            <div class="name">
              主题设置
            </div>
            <div class="code-name">.icon-zhutishezhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-guanbidangqianbiaoqianye"></span>
            <div class="name">
              关闭当前标签页
            </div>
            <div class="code-name">.icon-guanbidangqianbiaoqianye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-tiaojianshanchu"></span>
            <div class="name">
              条件删除
            </div>
            <div class="code-name">.icon-tiaojianshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-lieshaixuanyoujilu"></span>
            <div class="name">
              列筛选有记录
            </div>
            <div class="code-name">.icon-lieshaixuanyoujilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-gaojishaixuanzhankaisvg"></span>
            <div class="name">
              高级筛选展开svg
            </div>
            <div class="code-name">.icon-gaojishaixuanzhankaisvg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhongzhi"></span>
            <div class="name">
              重置
            </div>
            <div class="code-name">.icon-zhongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-daochubiaoge"></span>
            <div class="name">
              导出表格
            </div>
            <div class="code-name">.icon-daochubiaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-gaojishaixuan"></span>
            <div class="name">
              高级筛选
            </div>
            <div class="code-name">.icon-gaojishaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-lieshaixuan"></span>
            <div class="name">
              列筛选
            </div>
            <div class="code-name">.icon-lieshaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-tuozhuaishangchuan"></span>
            <div class="name">
              拖拽上传
            </div>
            <div class="code-name">.icon-tuozhuaishangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhankaiquanbu"></span>
            <div class="name">
              展开全部
            </div>
            <div class="code-name">.icon-zhankaiquanbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-dayindangqianyemian"></span>
            <div class="name">
              打印当前页面
            </div>
            <div class="code-name">.icon-dayindangqianyemian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xialacaidan"></span>
            <div class="name">
              下拉菜单
            </div>
            <div class="code-name">.icon-xialacaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-a-guanbizuocebiaoqianyegudingzailieshou"></span>
            <div class="name">
              关闭左侧标签页:固定在列首
            </div>
            <div class="code-name">.icon-a-guanbizuocebiaoqianyegudingzailieshou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-fuzhiquanxian"></span>
            <div class="name">
              复制权限
            </div>
            <div class="code-name">.icon-fuzhiquanxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shuoming2"></span>
            <div class="name">
              说明2
            </div>
            <div class="code-name">.icon-shuoming2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-bangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-midu"></span>
            <div class="name">
              密度
            </div>
            <div class="code-name">.icon-midu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-guanbisuoyoubiaoqianye"></span>
            <div class="name">
              关闭所有标签页
            </div>
            <div class="code-name">.icon-guanbisuoyoubiaoqianye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-lieshezhi"></span>
            <div class="name">
              列设置
            </div>
            <div class="code-name">.icon-lieshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhuce"></span>
            <div class="name">
              注册
            </div>
            <div class="code-name">.icon-zhuce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shuoming1"></span>
            <div class="name">
              说明1
            </div>
            <div class="code-name">.icon-shuoming1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-a-guanbiyoucebiaoqianyegudingzailiewei"></span>
            <div class="name">
              关闭右侧标签页:固定在列尾
            </div>
            <div class="code-name">.icon-a-guanbiyoucebiaoqianyegudingzailiewei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-daochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhediequanbu"></span>
            <div class="name">
              折叠全部
            </div>
            <div class="code-name">.icon-zhediequanbu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xialagengduo"></span>
            <div class="name">
              下拉更多
            </div>
            <div class="code-name">.icon-xialagengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shoucang"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-yonghujiaose"></span>
            <div class="name">
              用户角色
            </div>
            <div class="code-name">.icon-yonghujiaose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-yidonglie"></span>
            <div class="name">
              移动列
            </div>
            <div class="code-name">.icon-yidonglie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-guanbiqitabiaoqianye"></span>
            <div class="name">
              关闭其它标签页
            </div>
            <div class="code-name">.icon-guanbiqitabiaoqianye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-chaxun"></span>
            <div class="name">
              查询
            </div>
            <div class="code-name">.icon-chaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-biangengbumen"></span>
            <div class="name">
              变更部门
            </div>
            <div class="code-name">.icon-biangengbumen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shuaxinliebiao"></span>
            <div class="name">
              刷新列表
            </div>
            <div class="code-name">.icon-shuaxinliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-guanbianniu"></span>
            <div class="name">
              关闭按钮
            </div>
            <div class="code-name">.icon-guanbianniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zijinguanli"></span>
            <div class="name">
              资金管理
            </div>
            <div class="code-name">.icon-zijinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zichanzijinpeizhiguanli"></span>
            <div class="name">
              资产资金配置管理
            </div>
            <div class="code-name">.icon-zichanzijinpeizhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-daohangzhedie"></span>
            <div class="name">
              导航折叠
            </div>
            <div class="code-name">.icon-daohangzhedie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhuxiao"></span>
            <div class="name">
              注销
            </div>
            <div class="code-name">.icon-zhuxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xinzeng"></span>
            <div class="name">
              新增
            </div>
            <div class="code-name">.icon-xinzeng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xitongguanli"></span>
            <div class="name">
              系统管理
            </div>
            <div class="code-name">.icon-xitongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-liuchengguanli"></span>
            <div class="name">
              流程管理
            </div>
            <div class="code-name">.icon-liuchengguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-yonghuming"></span>
            <div class="name">
              用户名
            </div>
            <div class="code-name">.icon-yonghuming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zichanguanli"></span>
            <div class="name">
              资产管理
            </div>
            <div class="code-name">.icon-zichanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zhanghuguanli"></span>
            <div class="name">
              账户管理
            </div>
            <div class="code-name">.icon-zhanghuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xiangmuguanli"></span>
            <div class="name">
              项目管理
            </div>
            <div class="code-name">.icon-xiangmuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-hetongmobanguanli"></span>
            <div class="name">
              合同模版管理
            </div>
            <div class="code-name">.icon-hetongmobanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-a-liuchengguanlipingtaixin"></span>
            <div class="name">
              流程管理平台（新）
            </div>
            <div class="code-name">.icon-a-liuchengguanlipingtaixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-chanpinguanli"></span>
            <div class="name">
              产品管理
            </div>
            <div class="code-name">.icon-chanpinguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-heguiyufengxianguanli"></span>
            <div class="name">
              合规与风险管理
            </div>
            <div class="code-name">.icon-heguiyufengxianguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zongheguanli"></span>
            <div class="name">
              综合管理
            </div>
            <div class="code-name">.icon-zongheguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-kehuguanli"></span>
            <div class="name">
              客户管理
            </div>
            <div class="code-name">.icon-kehuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xiugaimima"></span>
            <div class="name">
              修改密码
            </div>
            <div class="code-name">.icon-xiugaimima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-xitongpingtai"></span>
            <div class="name">
              系统平台
            </div>
            <div class="code-name">.icon-xitongpingtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zuixingongnengshiyongshuoming"></span>
            <div class="name">
              最新功能使用说明
            </div>
            <div class="code-name">.icon-zuixingongnengshiyongshuoming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-tongyongguanli"></span>
            <div class="name">
              通用管理
            </div>
            <div class="code-name">.icon-tongyongguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-shouqi"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.icon-shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-icon-huabaoxintuo-28"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-icon-huabaoxintuo-28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-zijinxitong"></span>
            <div class="name">
              资金系统
            </div>
            <div class="code-name">.icon-zijinxitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-icon-huabaoxintuo-29"></span>
            <div class="name">
              说明
            </div>
            <div class="code-name">.icon-icon-huabaoxintuo-29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-daohangzhankai"></span>
            <div class="name">
              导航展开
            </div>
            <div class="code-name">.icon-daohangzhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-caiwupaozhangguanli"></span>
            <div class="name">
              财务抛账管理
            </div>
            <div class="code-name">.icon-caiwupaozhangguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-yingxiaoguanli"></span>
            <div class="name">
              营销管理
            </div>
            <div class="code-name">.icon-yingxiaoguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon font_family icon-baobiao"></span>
            <div class="name">
              报表
            </div>
            <div class="code-name">.icon-baobiao
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="font_family icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            font_family" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiesuo"></use>
                </svg>
                <div class="name">解锁</div>
                <div class="code-name">#icon-jiesuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyong"></use>
                </svg>
                <div class="name">启用</div>
                <div class="code-name">#icon-qiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoding"></use>
                </svg>
                <div class="name">锁定</div>
                <div class="code-name">#icon-suoding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinyong"></use>
                </svg>
                <div class="name">禁用</div>
                <div class="code-name">#icon-jinyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuming1"></use>
                </svg>
                <div class="name">用户名1</div>
                <div class="code-name">#icon-yonghuming1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-samsshouyiquanbiangeng"></use>
                </svg>
                <div class="name">sams受益权变更</div>
                <div class="code-name">#icon-samsshouyiquanbiangeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liwaiguanli"></use>
                </svg>
                <div class="name">例外管理</div>
                <div class="code-name">#icon-liwaiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangxiatuodong"></use>
                </svg>
                <div class="name">上下拖动</div>
                <div class="code-name">#icon-shangxiatuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuyishixiang"></use>
                </svg>
                <div class="name">注意事项</div>
                <div class="code-name">#icon-zhuyishixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ABjiao"></use>
                </svg>
                <div class="name">AB角</div>
                <div class="code-name">#icon-ABjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuanzuzhijigou"></use>
                </svg>
                <div class="name">切换组织机构</div>
                <div class="code-name">#icon-qiehuanzuzhijigou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhutishezhi1"></use>
                </svg>
                <div class="name">主题设置</div>
                <div class="code-name">#icon-zhutishezhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbidangqianbiaoqianye"></use>
                </svg>
                <div class="name">关闭当前标签页</div>
                <div class="code-name">#icon-guanbidangqianbiaoqianye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaojianshanchu"></use>
                </svg>
                <div class="name">条件删除</div>
                <div class="code-name">#icon-tiaojianshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lieshaixuanyoujilu"></use>
                </svg>
                <div class="name">列筛选有记录</div>
                <div class="code-name">#icon-lieshaixuanyoujilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaojishaixuanzhankaisvg"></use>
                </svg>
                <div class="name">高级筛选展开svg</div>
                <div class="code-name">#icon-gaojishaixuanzhankaisvg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongzhi"></use>
                </svg>
                <div class="name">重置</div>
                <div class="code-name">#icon-zhongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochubiaoge"></use>
                </svg>
                <div class="name">导出表格</div>
                <div class="code-name">#icon-daochubiaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaojishaixuan"></use>
                </svg>
                <div class="name">高级筛选</div>
                <div class="code-name">#icon-gaojishaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lieshaixuan"></use>
                </svg>
                <div class="name">列筛选</div>
                <div class="code-name">#icon-lieshaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuozhuaishangchuan"></use>
                </svg>
                <div class="name">拖拽上传</div>
                <div class="code-name">#icon-tuozhuaishangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankaiquanbu"></use>
                </svg>
                <div class="name">展开全部</div>
                <div class="code-name">#icon-zhankaiquanbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dayindangqianyemian"></use>
                </svg>
                <div class="name">打印当前页面</div>
                <div class="code-name">#icon-dayindangqianyemian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialacaidan"></use>
                </svg>
                <div class="name">下拉菜单</div>
                <div class="code-name">#icon-xialacaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-guanbizuocebiaoqianyegudingzailieshou"></use>
                </svg>
                <div class="name">关闭左侧标签页:固定在列首</div>
                <div class="code-name">#icon-a-guanbizuocebiaoqianyegudingzailieshou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhiquanxian"></use>
                </svg>
                <div class="name">复制权限</div>
                <div class="code-name">#icon-fuzhiquanxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuoming2"></use>
                </svg>
                <div class="name">说明2</div>
                <div class="code-name">#icon-shuoming2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-midu"></use>
                </svg>
                <div class="name">密度</div>
                <div class="code-name">#icon-midu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbisuoyoubiaoqianye"></use>
                </svg>
                <div class="name">关闭所有标签页</div>
                <div class="code-name">#icon-guanbisuoyoubiaoqianye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lieshezhi"></use>
                </svg>
                <div class="name">列设置</div>
                <div class="code-name">#icon-lieshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuce"></use>
                </svg>
                <div class="name">注册</div>
                <div class="code-name">#icon-zhuce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuoming1"></use>
                </svg>
                <div class="name">说明1</div>
                <div class="code-name">#icon-shuoming1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-guanbiyoucebiaoqianyegudingzailiewei"></use>
                </svg>
                <div class="name">关闭右侧标签页:固定在列尾</div>
                <div class="code-name">#icon-a-guanbiyoucebiaoqianyegudingzailiewei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhediequanbu"></use>
                </svg>
                <div class="name">折叠全部</div>
                <div class="code-name">#icon-zhediequanbu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xialagengduo"></use>
                </svg>
                <div class="name">下拉更多</div>
                <div class="code-name">#icon-xialagengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghujiaose"></use>
                </svg>
                <div class="name">用户角色</div>
                <div class="code-name">#icon-yonghujiaose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidonglie"></use>
                </svg>
                <div class="name">移动列</div>
                <div class="code-name">#icon-yidonglie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbiqitabiaoqianye"></use>
                </svg>
                <div class="name">关闭其它标签页</div>
                <div class="code-name">#icon-guanbiqitabiaoqianye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaxun"></use>
                </svg>
                <div class="name">查询</div>
                <div class="code-name">#icon-chaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biangengbumen"></use>
                </svg>
                <div class="name">变更部门</div>
                <div class="code-name">#icon-biangengbumen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxinliebiao"></use>
                </svg>
                <div class="name">刷新列表</div>
                <div class="code-name">#icon-shuaxinliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbianniu"></use>
                </svg>
                <div class="name">关闭按钮</div>
                <div class="code-name">#icon-guanbianniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zijinguanli"></use>
                </svg>
                <div class="name">资金管理</div>
                <div class="code-name">#icon-zijinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zichanzijinpeizhiguanli"></use>
                </svg>
                <div class="name">资产资金配置管理</div>
                <div class="code-name">#icon-zichanzijinpeizhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohangzhedie"></use>
                </svg>
                <div class="name">导航折叠</div>
                <div class="code-name">#icon-daohangzhedie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuxiao"></use>
                </svg>
                <div class="name">注销</div>
                <div class="code-name">#icon-zhuxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzeng"></use>
                </svg>
                <div class="name">新增</div>
                <div class="code-name">#icon-xinzeng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongguanli"></use>
                </svg>
                <div class="name">系统管理</div>
                <div class="code-name">#icon-xitongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liuchengguanli"></use>
                </svg>
                <div class="name">流程管理</div>
                <div class="code-name">#icon-liuchengguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuming"></use>
                </svg>
                <div class="name">用户名</div>
                <div class="code-name">#icon-yonghuming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zichanguanli"></use>
                </svg>
                <div class="name">资产管理</div>
                <div class="code-name">#icon-zichanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghuguanli"></use>
                </svg>
                <div class="name">账户管理</div>
                <div class="code-name">#icon-zhanghuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangmuguanli"></use>
                </svg>
                <div class="name">项目管理</div>
                <div class="code-name">#icon-xiangmuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hetongmobanguanli"></use>
                </svg>
                <div class="name">合同模版管理</div>
                <div class="code-name">#icon-hetongmobanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-liuchengguanlipingtaixin"></use>
                </svg>
                <div class="name">流程管理平台（新）</div>
                <div class="code-name">#icon-a-liuchengguanlipingtaixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chanpinguanli"></use>
                </svg>
                <div class="name">产品管理</div>
                <div class="code-name">#icon-chanpinguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-heguiyufengxianguanli"></use>
                </svg>
                <div class="name">合规与风险管理</div>
                <div class="code-name">#icon-heguiyufengxianguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zongheguanli"></use>
                </svg>
                <div class="name">综合管理</div>
                <div class="code-name">#icon-zongheguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kehuguanli"></use>
                </svg>
                <div class="name">客户管理</div>
                <div class="code-name">#icon-kehuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaimima"></use>
                </svg>
                <div class="name">修改密码</div>
                <div class="code-name">#icon-xiugaimima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongpingtai"></use>
                </svg>
                <div class="name">系统平台</div>
                <div class="code-name">#icon-xitongpingtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuixingongnengshiyongshuoming"></use>
                </svg>
                <div class="name">最新功能使用说明</div>
                <div class="code-name">#icon-zuixingongnengshiyongshuoming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongyongguanli"></use>
                </svg>
                <div class="name">通用管理</div>
                <div class="code-name">#icon-tongyongguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouqi"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#icon-shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-huabaoxintuo-28"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-icon-huabaoxintuo-28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zijinxitong"></use>
                </svg>
                <div class="name">资金系统</div>
                <div class="code-name">#icon-zijinxitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-huabaoxintuo-29"></use>
                </svg>
                <div class="name">说明</div>
                <div class="code-name">#icon-icon-huabaoxintuo-29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohangzhankai"></use>
                </svg>
                <div class="name">导航展开</div>
                <div class="code-name">#icon-daohangzhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiwupaozhangguanli"></use>
                </svg>
                <div class="name">财务抛账管理</div>
                <div class="code-name">#icon-caiwupaozhangguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiaoguanli"></use>
                </svg>
                <div class="name">营销管理</div>
                <div class="code-name">#icon-yingxiaoguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baobiao"></use>
                </svg>
                <div class="name">报表</div>
                <div class="code-name">#icon-baobiao</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
